<template>
  <div class="detail-params-info" v-if="Object.keys(paramsInfo).length">
    <!-- 第一个表格: 尺码 胸围 腰围 -->
    <table
      v-for="(table, index) in paramsInfo.sizes"
      class="info-size"
      :key="index"
    >
      <tr v-for="(tr, indey) in table" :key="indey">
        <td v-for="(td, indez) in tr" :key="indez">{{ td }}</td>
      </tr>
    </table>

    <!-- 第二个表格: 裤长 袖长 肩宽 衣长 -->
    <table>
      <tr v-for="(t, idx) in paramsInfo.infos" :key="idx">
        <td class="params-key">{{ t.key }}</td>
        <td class="params-value">{{ t.value }}</td>
      </tr>
    </table>

    <!-- 图片: 可能无 -->
    <div class="params-info-img" v-if="paramsInfo.images.length !== 0">
      <img :src="paramsInfo.images" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    paramsInfo: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {}
  },
  methods: {},
  watch: {},
  components: {}
}
</script>

<style lang="less" scoped>
.detail-params-info {
  padding: 15px 10px;
  font-size: 14px;
  border-bottom: 5px solid #f2f5f8;

  // TODO: 对这部分代码进行重构解析
  table {
    width: 100%;
    // 合并边框
    border-collapse: collapse;

    tr {
      // 对表格中的每一行都给一个高度
      height: 42px;

      td {
        padding: 2px 0;
        // 然后给每一列都给一个下边框
        border-bottom: 1px solid rgba(100, 100, 100, 0.1);
      }
    }
  }

  .params-key {
    // TODO: 当value的数据量比较大的时候, 会挤到key,所以给一个固定的宽度
    width: 95px;
  }

  // 设置value项的文字颜色
  .params-value {
    color: #8675a9;
  }

  .params-info-img {
    // 如果 有图片,就让图片的宽为100%
    img {
      width: 100%;
    }
  }
}
</style>
